<template>
  <div
    class="content-card"
    :class="cls"
  >
    <div class="images">
      <div class="img1">
        <img :src="item.image" alt="" />
      </div>
      <div class="img2">
        <div class="item"><img :src="item.image1" alt="" /></div>
        <div class="item"><img :src="item.image2" alt="" /></div>
      </div>
    </div>
    <div class="txt">
      <div class="title">
        <span>{{ item.title }}</span>
        <el-icon v-if="showIcon" @click.stop="showModal"><MoreFilled /></el-icon>
      </div>
      <div class="week-view">
        <div class="stat-item">
          <el-icon>
            <Clock />
          </el-icon>
          <span>{{ item.timeAgo }}</span>
        </div>
        <div class="stat-item">
          <el-icon>
            <View />
          </el-icon>
          <span>{{ item.views }}</span>
        </div>
      </div>
    </div>
    <img src="@/assets/checked.png" class="checked" alt="">
    <el-dialog
        v-model="visible"
        append-to-body
        class="myDialog"
        :title="item.title"
        @close="handleCancel"
        width="913px">
        <div class="list">
          <div class="item" v-for="el in list" :key="el.id" :class="selectIds.includes(el.id)?'on':''" :style="{ backgroundImage: `url(${el.image})` }"  @click.stop="selectItem(el.id)">
            <div class="txt">
              <div class="name">{{ el.title }}</div>
            </div>
            <div class="icon"><Check /></div>         
          </div>
        </div>
        <template v-slot:footer>    
          <div class="btns">
              <el-button type="primary" @click="handleAdd">create a new</el-button>
            <el-button @click="handleCancel">Cancel</el-button>
          </div>       
          
        </template>
      </el-dialog>
  </div>
</template>
<script setup>
import {defineProps,defineEmits } from "vue";
import {  Clock, View,Check } from '@element-plus/icons-vue'
const props = defineProps({
  item: {
    type: Object,
    default: {}
  },
  showIcon: {
      type: Boolean,
      default: false
  },
  cls: {
    type: String,
    default: ''
  },
});

 const emit=defineEmits(['openModal'])
  const showModal=()=>{
    emit('openModal',true)
  }
</script>
<style lang='scss' scoped>
.content-card {
  background: #414055;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 10px;
  position: relative;
  &.active{
    border: 2px solid RGBA(227, 66, 52, 1);
    .checked{
      display: block;
    }
  }
  .checked{
    display: none;
    position: absolute;
    right: 15px;
    top: 135px;
    width: 30px;
    height: 30px;
  }
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
  }

  .images {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .img1 {
      width: 49%;
      height: 160px;
      border-radius: 8px;
    }
    .img2 {
      width: 49%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      height: 160px;
      .item {
        height: 48%;
        overflow: hidden;
        border-radius: 8px;
      }
    }
    img {
      width: 100%;
      height: 100%;
      vertical-align: middle;
      border-radius: 8px;
    }
  }
  .txt {
    border-top: 1px solid rgba(218, 218, 218, 0.2);
    margin-top: 10px;
    padding: 10px 10px 0;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 18px;
      color: #ffffff;
      line-height: 24px;
    }
    .week-view {
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
      font-weight: 400;
      font-size: 16px;
      color: #999999;
      height: 24px;
      .stat-item {
        display: flex;
        align-items: center;
        .el-icon {
          margin-right: 6px;
        }
        svg {
          width: 20px;
          height: 20px;
        }
      }
    }
  }
}
 .btns {
      display: flex;
      align-items: center;
      justify-content: center;
    } 
.list{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    max-height: 350px;
    overflow: auto;
    .item{
      width: 270px;
      height: 174px;
      border-radius: 10px;
      margin-top: 19px;
      margin-right: 20px;
      background-size: cover;
      cursor: pointer;
      display: flex;
      align-items: flex-end;
      position: relative;
      &.on{
         border: 2px solid RGBA(227, 66, 52, 1);
        .icon{
          display: flex;
        }
      }
      &:nth-child(3n){
        margin-right: 0;
      }
      .txt{
        height: 45px;
      }
      .name{
        // height: 50px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 16px;
        color: #FFFFFF;
        line-height: 18px;
        padding: 0 16px 0;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
      }
      .icon{
        display: none;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 28px;
        height: 28px;
        border-radius: 10px 0 10px 0;
        background: rgba(227, 66, 52, 1);        
        align-items: center;
        justify-content: center;
        svg{
          width: 24px;
          path{
            fill: #fff;
          }
        }
      }
    }
   }  
</style>
<style lang="scss">
   .myDialog {
      background: #4B4759;
      padding-left: 24px;
      padding-right: 24px;
      .el-dialog__header.show-close{
        border-bottom: 1px solid  #5F4F55;;
      }
      .el-icon.el-dialog__close{
        color: #fff;
      }
    }   
</style>